<template>
  
  <div class="footerBody" >
      <div class="footerList">
          <div class="listItem leftItem">
              <div class="title">{{t('message.product')}}</div>
              <div class="itemRowBox">
                  <!--如果想要spider爬取该网页，那么这里的href需要配置页面-->
                  <a href="" v-for="(item,index) in productTypes" :key="index" @click="toProduct(item)">
                    {{item.name=='玻璃钢冷却塔'?t('productCat.lengqueta'):
                    item.name=='玻璃钢化粪池'?t('productCat.huafenchi'):
                    item.name=='玻璃钢管道'?t('productCat.guandao'):
                    item.name=='玻璃钢电缆管'?t('productCat.dianlanguan'):
                    item.name=='标志桩'?t('productCat.biaozhizhuang'):
                    item.name=='警示牌'?t('productCat.jinshipai'):
                    item.name=='玻璃钢净化塔'?t('productCat.jinhuata'):
                    item.name=='格栅'?t('productCat.geshan'):
                    item.name=='拉挤型材'?t('productCat.xingcai'):
                    item.name=='风机'?t('productCat.fengji'):item.name}}</a>
              </div>
          </div>
  
          <div class="listItem middleItem">
              <div class="title">{{ t('message.link') }}</div>
              <div class="itemColumnBox">
                <!--@click="$openUrl('http://www.boligang888.com')"-->
                  <a href="http://www.boligang888.com">{{t('message.cooperative')}}：{{'天新玻璃钢厂'}}</a>
              </div>
          </div>
  
          <div class="listItem rightItem">
              <div class="title">{{ t('message.followUs') }}</div>
              <div class="itemImageBox">
                  <div class="imagebox" v-for="(item,index) in linkList" :key="index">
                    <span v-if="language=='zh' && item.name" class="verticalFont">
                      {{item.name}}</span>
                    

                    <el-image v-if="item.logo" :alt="(item.name || '')+'-'+'新盛合环保设备'"
                        :fit="'contain'" lazy loading="lazy" class="footerImg"
                        :src="item.logo?item.logo:defaultImageSrc"
                        :preview-src-list="linkCode"
                        :initial-index="index" :hide-on-click-modal="true">

                        <template #placeholder>
                          <!-- 自定义的loading图片 -->
                          <EmptyImg :width="'145px'" :height="'145px'" />
                          
                        </template>

                        <template #error>
                          <div class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                          </div>
                        </template>

                    </el-image>

                    <!-- <div v-if="language=='en' && item.name" class="verticalEn">
                      {{item.name=='微信公众号'?t('message.wechatCode'):(item.name=='抖音账号'?t('message.douyinCode'):t('message.toutiaoCode'))}}</div> -->
                  </div>
              </div>
          </div>
      </div>

      <div class="footerLine"></div>

      <div class="footerBottom">
        <img class="footerIcon" :src="copyImage"/>
        <div class="footerText"><a class="linkFooter" :title="'新ICP备2024009118号'" @click="openBA()">新ICP备2024009118号</a>
          © 2024 新疆新盛合环保设备有限公司 版权所有
        </div>
      </div>
  
  </div>
</template>
<script setup lang="ts">

//全局调用$message
const { proxy }: any = getCurrentInstance()
import { throwError } from 'element-plus/es/utils/error.mjs';
// import api from '@/api/index.ts'
import { getCurrentInstance, ref,reactive,watch } from 'vue';

//引入国际化
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

//引入router跳转
const router=useRouter()

const $emit=defineEmits<{
  (e:String,value:any):void
}>()


let productTypes: any = ref([])




//不适用api直接调用
// const {data,error,status,refresh}= await httpGet('ProductCatAll','/business/client/product/catAll',{
//   lazy:true
// })

//使用api调用
const {data,error,status,refresh}= await GetProductCats()

  // console.log("stats: ",status.value)
  // console.log("refresh: ",refresh)
  // console.log("分类响应：", data.value)
  // console.log("error: ", error.value?.data,error.value?.data.error+': '+error.value?.data.status+'! 错误页面：'+error.value?.data.path)

  
  if(process.server && error.value){

    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
  }
  
  if(data.value?.length>0){
    productTypes.value = data.value
    $emit('productTypesChange',productTypes.value)
    // localStorage.setItem('productTypes', JSON.stringify(productTypes.value) )
    // console.log("分类：", localStorage.getItem('productTypes'))
  }



let linkList: any = ref([])
let linkCode: any = ref([])

const getlinkList = async () => {

  let {data,error,status}= await httpGet('linkCodeAll','/system/client/sitelink/list')
  // console.log("二维码响应：", data.value)
  if(data.value?.length>0){
    linkList.value = data.value
    linkList.value.map((item: { logo: any; })=>{
      if(item.logo){
        linkCode.value.push(item.logo)
      }
    })
  }
}

getlinkList()

const defaultImageSrc= 'imgs/header/wechat-code-300-300.png'
const copyImage= 'imgs/footer/net_safe.png'
const openBA=()=>{
window.open(
    "https://beian.miit.gov.cn",
    '_blank',
    'width=800,height=800,toolbar=no,scrollbars=no,menubar=no,screenX=240,screenY=100'
)
}

//跳转产品
function toProduct(item:any){
// console.log("去产品页：",item)
router.push({
  path: '/product/list',
  // query: {
  //   id: item.id
  // }
})
}

//监听
const props = defineProps({
  language: {
      type: String,
      default: 'zh'
  }
})
watch(() => proxy.language, (newVal, oldVal) => {
  // console.log("newVal", newVal)
  // console.log("oldVal", oldVal)
  // console.log("languag",props.language)
  
},{ immediate: true, deep: true })

</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
@import '@/assets/css/index.scss';
.footerBody {
  width: 100%;
  background-color: #eee;
  font-size: 16px; //引入全局宽度
  // padding: 30px 30% 30px 15%;
  .footerList {
      padding: 30px 0 10px 0;
      width: 100%;
      display: flex;
      .leftItem {
          width: 35%;
          margin-left: 170px;
      }
      .middleItem {
          width: 14%;
      }
      .rightItem {
          max-width: 45%;
          margin-left: 20px;
      }
      .listItem {
          display: flex;
          flex-direction: column;
  
          .title {
              width: 100%;
              display: flex;
              justify-content: flex-start;
              font-size: 20px;
              margin-bottom: 20px;
              color: #999999;
          }
          .itemRowBox {
              // width: 100%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              color: #666;
              cursor: pointer;
              a {
                  color: #666;
                  text-decoration: none;
                  margin-bottom: 10px;
                  font-size: 16px;
                  margin-right: 20px;
                  margin-bottom: 10px;
                  &:hover {
                      text-decoration: underline;
                      color: $blue;
                  }
              }
          }
          .itemColumnBox {
            display: flex;
            flex-direction: column;
            align-content: center;
            text-align: left;
            color: #666;
            cursor: pointer;
            a {
                color: #666;
                text-decoration: none;
                margin-bottom: 10px;
                font-size: 16px;
                margin-bottom: 10px;
                &:hover {
                    text-decoration: underline;
                    color: $blue;
                }
            }
          }
          .itemImageBox {
            display: flex;
            align-content: center;
            text-align: left;
            color: #666;
            cursor: pointer;
            .imagebox{
              display: flex;
              width: 170px;
              margin-right: 10px;
              // height: 170px;
              .verticalFont{
                width: 20px;
                // line-height: 40px;
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
                float: left;
                margin-right: 5px;
              }
              .verticalEn{
                display: table;
                width: 20px;
                // line-height: 40px;
                // writing-mode: vertical-rl;
                // transform: rotate(180deg);
                float: left;
                margin-right: 5px;
              }
              .footerImg{
                min-width: 145px;
                min-height: 145px;
                // :deep(.el-image__wrapper){
                //   min-width: 145px;
                // }
              }
            }
          }
      }
  }
  .footerLine {
    display: inline-block;
    width: 100%;
    height: 2px;
    color: white;
    border-bottom: 1px solid #bbb;
    background-color: unset;
  }
  .footerBottom{
    color: #9d9d9d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 20px;
    .footerIcon {
      width: 20px;
      margin-right: 8px;
    }

    .linkFooter {
      color: #555454;
      font-size: 14px;
      cursor: pointer;
      
    }
  }
}

</style>